<template>
  <view class="page-background">
    <CustomNavbar title="首页"></CustomNavbar>
    <!-- 轮播图 -->
    <view>
      <u-swiper :list="swiperList" :effect3d="true" :title="true"> </u-swiper>
    </view>
    <!-- 公告栏 -->
    <view class="notice">
      <u-notice-bar
        mode="horizontal"
        :list="noticeList"
        :more-icon="true"
        font-size="30"
        @click="handleGetNotice"
        @getMore="handleGetNotice"
      ></u-notice-bar>
    </view>
    <!-- 每日推荐  -->
    <view class="daily-recommend">
      <view class="daily-recommend-meta">
        <!-- 每日推荐单元格 -->
        <u-cell-group :border="false">
          <u-cell-item :arrow="false" title="每日推荐">
            <template #right-icon>
              <u-icon
                name="riqi"
                custom-prefix="custom-icon"
                size="30"
                color="#3fcec6"
              ></u-icon>
              <text class="daily-recommend-value">{{ Day }}号</text>
            </template>
          </u-cell-item>
        </u-cell-group>
      </view>
      <!-- 每日图片图片选择 -->
      <view class="daily-recommend-select">
        <view class="daily-recommend-content">
          <scroll-view scroll-x>
            <view
              class="img-box"
              v-for="item in dailyRecommendList"
              :key="item.id"
            >
              <view class="img-wrapper">
                <u-image
                  :src="item.url"
                  mode="aspectFill"
                  width="100%"
                  height="100%"
                  border-radius="16rpx"
                >
                  <template #loading>
                    <u-loading mode="circle" size="40"></u-loading>
                  </template>
                  <template #error>
                    <view style="font-size: 24rpx">加载失败</view>
                  </template>
                </u-image>
                <view class="img-overlay">
                  <text class="img-title">{{ item.title }}</text>
                  <view class="img-actions">
                    <u-icon name="eye" size="20" color="#fff"></u-icon>
                    <text class="view-count">1.2k</text>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <!-- 专题精选  -->
    <view class="featured-topics">
      <view class="featured-topics-meta">
        <!-- 专题精选单元格 -->
        <u-cell-group :border="false">
          <u-cell-item :arrow="false" title="专题精选" @click="handleGetMore">
            <template #right-icon>
              <u-icon name="more-circle" size="30" color="#3fcec6"></u-icon>
              <text class="featured-topics-value">More</text>
            </template>
          </u-cell-item>
        </u-cell-group>
      </view>
      <!-- 专题推荐选择 -->
      <view class="featured-topics-select">
        <view class="featured-topics-content">
          <!-- !TODO:专题推荐网格分块展示 -->
          <CategoryItem
          v-for="item in categoryItemList"
          :key="item._id"
          :title="item.name"
          :src="item.picurl"
          :id="item._id"
          :updateDate="onUpdateDate(item.updateTime)"
          />
          <CategoryItemMore />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import CustomNavbar from '../../components/UI/custom.vue';
  import { ref } from 'vue';
  import CategoryItemMore from '../../components/UI/CategoryItemMore.vue';
  import CategoryItem from '../../components/UI/CategoryItem.vue';
  import { onReady, onShareAppMessage } from '@dcloudio/uni-app';
  import {
    getCategoryItemListAPI,
    getDailyRecommendListAPI,
    getHomeBannerAPI,
  } from '@/api/home.js';
import { onUpdateDate, getCurrentDate } from '@/utils/dateFormat.js';
import { $u } from 'uview-pro';
  // {
  //       image: '/static/image/banner1.jpg',
  //       title: '欢迎来到FAN壁纸',
  //     },
  //     {
  //       image: '/static/image/banner2.jpg',
  //       title: '欢迎来到FAN壁纸',
  //     },
  //     {
  //       image: '/static/image/banner3.jpg',
  //       title: '欢迎来到FAN壁纸',
  //     },
  const swiperList = ref([]);
  
  
  let noticeList = [
    '欢迎来到FAN壁纸',
    '请挑选你喜欢的壁纸吧',
    '永久免费 无额外广告',
    '请多多支持我们哦',
  ];
  const Day = ref(getCurrentDate());
  const dailyRecommendList = ref([]);
  const categoryItemList = ref([]);
  const getHomeBanner = async () => {
    try {
      const res = await getHomeBannerAPI();
      swiperList.value = res.data.map(item => { 
        return {
          image: item.picurl,
          title: '欢迎来到FAN壁纸',
        }
      });
    } catch  {
      $u.toast('获取banner失败');
    }
  };

  const getDailyRecommendList = async () => {
    try {
      const res = await getDailyRecommendListAPI();
      dailyRecommendList.value = res.data.images;
    } catch  {
      $u.toast('获取每日推荐失败');
    }
  };
  const getCategoryItemList = async () => {
    try {
      const res = await getCategoryItemListAPI();
      categoryItemList.value = res.data;
    } catch  {
      $u.toast('获取专题精选失败');
    }
  };
  const handleGetNotice = () => {
    uni.navigateTo({
      url: '/pages/notice/index',
    });
};
  const handleGetMore = () => {
    uni.switchTab({
      url: '/pages/category/index',
    });
  }
  // 组件挂载时更新日期
  onReady(() => {
    getHomeBanner();
    Day.value = getCurrentDate();
    getDailyRecommendList();
    getCategoryItemList();
  });

// 分享给好友
onShareAppMessage(() => {
    return {
      title: 'FAN壁纸 - 精选高清壁纸',
      path: '/pages/home/index',
    };
})
  // // 分享到朋友圈
  // onShareTimeline(() => {
  //   return {
  //     title: 'FAN壁纸 - 精选高清壁纸',
  //     path: '/pages/home/index',
  //   };
  // })
</script>

<style scoped lang="scss">
  @import '@/common/style/page-background.scss';
  @import url('../../common/style/home.scss');
</style>
